<template>
  <div class="corporation_big_box">
    <div v-for="(item, index) in originList" :key="index">
      <div class="corporation_info_box">
        <div class="Enterprise_Info_one">
          <div
            class="Enterprise_icon"
            :style="{ backgroundColor: item.background || '#d99d9a' }"
          >
            {{ item.shortName }}
          </div>
          <div class="Enterprise_Info_one_right">
            <div class="Enterprise_Info_Name" @click="companyDetail(item)">
              {{ item.d2CorpName }}
            </div>
            <div class="Enterprise_Info_one_label">
              <!-- <div class="Enterprise_Info_logo margin_top">
                <img src="~img/lookAround/github.svg" alt="" />
              </div> -->
              <div
                class="Enterprise_grade label_margin_left margin_top"
                v-if="item.totalscore || item.creditRate"
              >
                <div
                  class="Enterprise_grade_number label_box"
                  v-if="item.totalscore"
                >
                  {{ item.totalscore }}分
                </div>
                <div
                  class="Enterprise_grade_text label_box"
                  v-if="item.creditRate"
                >
                  {{ item.creditRate }}
                </div>
              </div>
              <div
                class="label_box label_margin_left cx margin_top"
                :style="{ color: it.fontColor, background: it.backgroundColor }"
                v-for="(it, ind) in item.labelList"
                :key="ind"
              >
                {{ it.name }}
              </div>
              <!-- <div class="Enterprise_grade label_margin_left margin_top">
                <div class="Enterprise_grade_number label_box">699分</div>
                <div class="Enterprise_grade_text label_box">信用优秀</div>
              </div>
              <div class="label_box label_margin_left cx margin_top">存续</div>
              <div class="label_box label_margin_left tzgl margin_top">
                投资与资产
              </div>

              <div
                class="label_box label_margin_left gjj margin_top"
                v-for="{ item } in 8"
                :key="item"
              >
                公积金
              </div>
              <div class="label_box label_margin_left tzgl margin_top">
                营收500-1000万
              </div> -->
            </div>
          </div>
        </div>
        <div class="Enterprise_Info_two">
          <div class="Enterprise_Info_box">
            <div class="Enterprise_Info_title">法定代表人</div>
            <div class="Enterprise_Info_name">{{ item.d2LegalPer }}</div>
          </div>
          <div class="cut_apart"></div>
          <div class="Enterprise_Info_box">
            <div class="Enterprise_Info_title">注册资本</div>
            <div class="Enterprise_Info_name">{{ item.d2Regcap || "-" }}</div>
          </div>
          <div class="cut_apart"></div>
          <div class="Enterprise_Info_box">
            <div class="Enterprise_Info_title">成立日期</div>
            <div class="Enterprise_Info_name">{{ item.d2Esdate }}</div>
          </div>
        </div>
        <div class="Enterprise_Info_three">
          <div class="telephone_icon">
            <img src="~img/lookAround/telephone_icon.svg" alt="" />
          </div>
          <a class="telephone_number" :href="'tel:' + item.d2Tel">{{
            item.d2Tel || "-"
          }}</a>
        </div>
        <div class="Enterprise_Info_four">
          <div class="coordinate_icon">
            <img src="~img/lookAround/coordinate_blue_icon.svg" alt="" />
          </div>
          <div class="coordinate_number">{{ item.distance * 1000 }}m</div>
          <div class="cut_apart2"></div>
          <div class="coordinate_name">
            {{ item.d2Dom }}
          </div>
        </div>
      </div>
      <div class="bottom_cut"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {
    originList: Array,
  },
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {};
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {},
  mounted() {},
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    companyDetail(item) {
      // this.$router.push("/enterpriseDetails");
      let data = JSON.stringify(item);
      this.$router.push({
        path: "/enterpriseDetails",
        query: {
          // item: data,
          corpKey: item.corpKey,
        }, // 要传递的参数
      });
    },
  }, // all the methods should be put here in the last
};
</script>
<style scoped lang="scss">
.Enterprise_Info_one {
  display: flex;
}
.Enterprise_icon {
  width: 38px;
  height: 37px;
  line-height: 15px;
  padding: 4px 1px 1px 0;
  background-color: #d99d9a;
  font-size: 13px;
  color: white;
  text-align: center;
  border-radius: 5px;
  margin-top: 5px;
  // height: fit-content;
}
.Enterprise_Info_Name {
  // font-weight: bold;
  font-size: 17.33px;
  font-family: PuHuiTi65;
}
.Enterprise_Info_one_right {
  flex: 1;
  margin-left: 5px;
}
.Enterprise_Info_logo {
  img {
    height: 25px;
  }
}
.Enterprise_grade {
  display: flex;
}
.Enterprise_grade_number {
  background-color: #f6e6e1;
}
.Enterprise_grade_text {
  background-color: #c33d28;
  color: white;
}
.label_box {
  height: 20px;
  line-height: 20px;
  padding: 0 10px;
  font-size: 13.33px;
  font-family: PuHuiTi65;
}
.Enterprise_Info_one_label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
}
.label_margin_left {
  margin-right: 7px;
}
.cx {
  background-color: #e3f2ed;
  color: #3f9f71;
}
.tzgl {
  background-color: #e4efff;
  color: #3282e4;
}
.margin_top {
  margin-top: 8px;
}
.gjj {
  background-color: #f9e9dc;
  color: #9f6c3f;
}
.Enterprise_Info_two {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  text-align: center;
  margin-top: 15px;
}
.Enterprise_Info_title {
  color: #989898;
  font-size: 12px;
  font-family: PuHuiTi65;
}
.Enterprise_Info_name {
  margin-top: 3px;
  font-size: 13px;
}
.cut_apart {
  width: 1px;
  height: 30px;
  background-color: #f4f4f4;
}
.Enterprise_Info_box {
  width: 33%;
  height: 45px;
  // background-color: #3f9f71;
}
.Enterprise_Info_three {
  display: flex;
  border-top: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
  height: 30px;
  line-height: 30px;
}
.telephone_icon {
  // margin-top: 2px;
  img {
    width: 15px;
  }
}
.coordinate_icon {
  // margin-top: 2px;
  img {
    width: 15px;
  }
}
.telephone_number {
  color: #3282e4;
  font-size: 14px;
  margin-left: 3px;
}
.Enterprise_Info_four {
  display: flex;
  align-items: center;
  // background-color: red;
  height: 30px;
  // line-height: 30px;
}
.cut_apart2 {
  width: 1px;
  height: 13px;
  background-color: #9f9f9f;
  margin: 5px;
}
.coordinate_number {
  font-size: 13px;
  margin-left: 3px;
}
.coordinate_name {
  font-size: 13px;
  color: #3282e4;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; // 默认不换行；
  letter-spacing: 1px;
}
.bottom_cut {
  height: 7px;
  width: 100%;
  background-color: #f6f6f6;
}

.touch_down_icon {
  text-align: center;
  img {
    width: 30px;
  }
}
.fixed_position_icon {
  img {
    width: 12px;
  }
}
.corporation_big_box {
  overflow: auto;
  flex: 1;
   font-family: PuHuiTi65;
}
.corporation_info_box {
  padding: 10px;
}
</style>
